<template>
    <div class='app-container bg-home-bg bg-size-full'>
        <div class="flex items-center justify-between">
            <n-flex align="center" :size="24">
                <img class="w-[283px] h-[40px]" :src="logo">
                <n-button type="info" @click="$router.push('/')">返回导航页</n-button>
            </n-flex>
            <div class="flex items-center gap-35px">
                <n-flex align="center" :size="17">
                    <n-avatar round :size="52" :src="userAvatar" />
                    <n-flex :size="1" vertical>
                        <p class="text-[#fff] text-xl font-bold mb-1">你好，欢迎来到霍林郭勒！</p>
                        <n-flex align="center" :size="16" v-if="!token">
                            <span class="text-base text-[#fff] opacity-80">为了让您享受更方便的办事体验，请</span>
                            <n-button type="info" @click="toLogin">登录账号</n-button>
                        </n-flex>
                        <n-flex align="center" :size="16" v-else>
                            <span class="text-lg text-[#fff]">{{ userInfo?.user }}</span>
                            <n-button type="info" @click="doLogout">退出登录</n-button>
                        </n-flex>
                    </n-flex>
                </n-flex>
                <div class="flex flex-col gap-8px">
                    <n-flex align="center" :size="11" v-if="weatherInfo">
                        <img class="w-[24px] h-24px truncate" :src="'http://vaw.tongliao.sugonup.com/weather' + weatherInfo.code_url" alt="">
                        <span class="text-base text-[#fff]">{{ weatherInfo.tmp }}°C - {{ weatherInfo.tmp_max }}°C</span>
                    </n-flex>
                    <span class="text-base text-[#fff]">最低气温：{{ weatherInfo?.tmp_min }}°C</span>
                </div>
            </div>
        </div>

        <div class="content-wrap flex gap-16px" v-if="!isShowZnwbDetail && !isShowKytbDetail">
            <n-flex class="w-[33%] flex-shrink-0" :size="16" vertical>
                <div class="wrap-card min-h-313px h-[48%] bg-[#5675f0]">
                    <div class="flex justify-between items-center">
                        <n-flex :size="17">
                            <img class="w-26px h-26px" :src="iconZxdb" />
                            <span class="text-xl text-[#fff] font-bold -mt-0.5">咨询导办</span>
                        </n-flex>
                        <n-flex class="cursor-pointer" align="center" :size="8" @click="openDetail('zxdb')" v-if="matterData.length">
                            <span class="text-base text-[#fff]">查看全部</span>
                            <img class="w-10px h-10px" :src="iconArrowRS" alt="">
                        </n-flex>
                    </div>
                    <ul class="zxdb-content" v-if="matterData.length">
                        <li class="flex items-center justify-between" v-for="item in matterData" :key="item.uuid" @click="openUrlDetail(item.file_or_url)">
                            <span class="text-base text-[#fff] truncate max-w-[90%]">{{ item.name }}</span>
                            <img class="w-20px h-20px" :src="iconArrowR" alt="">
                        </li>
                    </ul>
                    <div class="zxdb-content flex items-center flex-col xy-center" v-else>
                        <img class="w-121px h-124px" src="/no-data.png" alt="">
                        <span class="text-[#cbd5e1] text-base">暂无数据</span>
                    </div>
                </div>

                <div class="wrap-card min-h-286px flex-1">
                    <div class="flex justify-between items-center">
                        <n-flex :size="17">
                            <img class="w-26px h-26px" :src="iconkytb" />
                            <span class="text-xl text-[#fff] font-bold -mt-0.4">跨域通办</span>
                        </n-flex>
                        <n-flex class="cursor-pointer" align="center" :size="8" @click="openDetail('kytb')">
                            <span class="text-base text-[#fff]">查看全部</span>
                            <img class="w-10px h-10px" :src="iconArrowRS" alt="">
                        </n-flex>
                    </div>
                    <n-flex vertical :size="16" class="mt-17px">
                        <div class="h-56px flex items-center pl-20px cursor-pointer kytb-li relative" @click="openUrlDetail(item.path)" v-for="(item, i) in kytbList.slice(0,5)" :key="i">
                            <img class="w-[36px] h-[36px]" :src="item.icon" alt="">
                            <img class="w-56px h-56px absolute top-0 right-0" :src="iconkq" alt="" v-if="i == 0">
                            <span class="text-base text-[#fff] font-bold ml-21px">{{ item.name }}</span>
                        </div>
                    </n-flex>
                </div>
            </n-flex> 

            <n-flex class="flex-1" :size="20" vertical>
                <div class="wrap-card max-h-720px min-h-450px h-[78%] bg-[#5675f0] znwb-bg">
                    <n-flex :size="17">
                        <img class="w-26px h-26px" :src="iconZnwb" />
                        <span class="text-xl text-[#fff] font-bold -mt-0.4">智能网办</span>
                    </n-flex>
                    <div class="znwb-content">
                        <div class="flex justify-between items-center pr-16px">
                            <div>
                                <n-flex align="center" :size="16" v-if="tabName == 'theme'">
                                    <span class="text-[#fff] text-base cursor-pointer" :class="{'fw-tab-active': serverType == 2}" @click="serverType = 2">法人服务</span>
                                    <n-divider vertical />
                                    <span class="text-[#fff] text-base cursor-pointer" :class="{'fw-tab-active': serverType == 1}" @click="serverType = 1">个人服务</span>
                                </n-flex>
                            </div>
                            <n-flex align="center" :size="8" class="cursor-pointer" @click="openDetail('znwb')">
                                <span class="text-base text-[#fff]">查看全部</span>
                                <img class="w-10px h-10px" :src="iconArrowRS" alt="">
                            </n-flex>
                        </div>
                        <div class="znwb-tabs">
                            <n-flex :size="9">
                                <div class="znwb-tab-li" :class="{'active': tabName == 'dept'}" @click="tabName = 'dept'">部门分类</div>
                                <div class="znwb-tab-li" :class="{'active': tabName == 'theme'}" @click="tabName = 'theme'">主题分类</div>
                            </n-flex>
                        </div>
                        <ul class="mt-12px pr-4" v-if="sortData.length">
                            <li class="cursor-pointer" :class="{'no-matter': !item.data.length}" v-for="item in sortData" :key="item.uuid" @click="openDetail('znwb', item.uuid)">
                                <img class="w-[36px] h-[36px] absolute -left-55px top-22px" :src="item.icon || iconZxdb" alt="">
                                <p class="text-base text-[#fff] font-bold mb-10px max-w-max cursor-pointer">{{ item.name }}</p>
                                <div class="text-[#fff]">
                                    <div class="line-clamp-2" v-if="item.data.length">
                                        <span class="text-base text-[#fff] cursor-pointer" v-for="items in item.data" :key="items.uuid" @click.stop="openUrlDetail(items.file_or_url)">{{ items.name }}</span>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="flex items-center flex-col xy-center" v-else>
                            <img class="w-121px h-124px" src="/no-data.png" alt="">
                            <span class="text-[#cbd5e1] text-base">暂无数据</span>
                        </div>
                    </div>
                </div>

                <div class="w-full flex min-h-145px flex-1 gap-20px">
                    <ul class="w-[50%] flex items-center justify-around wrap-card">
                        <li class="flex flex-col items-center cursor-pointer">
                            <img class="w-[70%] h-[70%]" :src="iconAi" alt="" @click="openUrlDetail('znkf')">
                            <span class="text-sm text-[#fff] font-600 mt-8px">AI智能客服</span>
                        </li>
                        <li class="flex flex-col items-center cursor-pointer" @click="openUrlDetail('unit')">
                            <img class="w-[70%] h-[70%]" :src="iconRgkf" alt="">
                            <span class="text-sm text-[#fff] font-600 mt-8px">人工客服</span>
                        </li>
                        <li class="flex flex-col items-center cursor-pointer" @click="openPreDrawer">
                            <img class="w-[70%] h-[70%]" :src="iconbbyy" alt="">
                            <span class="text-sm text-[#fff] font-600 mt-8px">帮办预约</span>
                        </li>
                    </ul>
                    <div class="w-[50%] overflow-hidden" v-if="newsData.length">
                        <n-carousel autoplay dot-type="line">
                            <img class="w-full h-full cursor-pointer" v-for="item in newsData" :key="item.uuid" :src="jointFilePath(item.cover)" @click="toNewsDetail(item)" />
                        </n-carousel>
                    </div>
                </div>
            </n-flex>
        </div>
        <!-- <zxdbDetail v-model:show="isShowDetail" :matterItem="matterAllData" :detailId="detailId" v-if="isShowDetail" /> -->
        <znwbDetail v-model:show="isShowZnwbDetail" :tabName="tabName" :seType="serverType" :detailId="detailId" v-if="isShowZnwbDetail" />
        <kytbDetail v-model:show="isShowKytbDetail" v-if="isShowKytbDetail" />

        <LoginModal ref="loginModalRef" />
        <LoginOutModal ref="loginOutModalRef" />

        <!-- 新增预约表单 -->
        <n-drawer class="pre-form-drawer" v-model:show="isShowPreFormDrawer" height="90%" placement="bottom">
            <n-drawer-content>
                <template #header>
                    <div class="w-full flex items-center justify-between">
                        <span class="text-xl text-[#fff] font-600">新增预约</span>
                        <n-icon class="cursor-pointer" :size="28" color="#fff" :component="Close" @click="isShowPreFormDrawer = false" />
                    </div>
                </template>
                <div class="w-[40%] mx-auto pt-76px">
                    <Preform ref="preformRef" :matterItem="matterAllData" />
                </div>
                <template #footer>
                    <n-flex>
                        <n-button class="w-110px h-44px" text-color="#DAE9FF" color="#5379db" @click="isShowPreFormDrawer = false">取消</n-button>
                        <n-button class="w-110px h-44px" text-color="#2B4AC6" color="#dae9ff" @click="submitPre">确认预约</n-button>
                    </n-flex>
                </template>
            </n-drawer-content>
        </n-drawer>
        <PreSuccessModal ref="preSuccessModalRef" :info="preInfo" />
    </div>
</template>

<script setup lang='ts'>
    import userAvatar from "@/assets/image/avatar.png"
    import iconZxdb from "@/assets/image/icon/icon-zxdb.png"
    import iconArrowR from "@/assets/image/icon/icon-arrow-r.png"
    import iconArrowRS from "@/assets/image/icon/icon-arrow-rs.png"
    import iconZnwb from "@/assets/image/icon/icon-znwb.png"
    import iconkytb from "@/assets/image/icon/icon-kytb.png"
    import iconAi from "@/assets/image/icon/icon-aizn.png"
    import iconRgkf from "@/assets/image/icon/icon-rgkf.png"
    import iconbbyy from "@/assets/image/icon/icon-bbyy.png"
    import iconkq from "@/assets/image/icon/icon-kq.png"
    import { useUserStore } from "@/store/modules/user"
    import { useCacheStore } from "@/store/modules/cacheData"
    import logo from "@/assets/image/logo.png"
    // import zxdbDetail from "./detail/zxdbDetail.vue"
    import znwbDetail from "./detail/znwbDetail.vue"
    import kytbDetail from "./detail/kytbDetail.vue"
    import { getMatterItemApi, getMatterSortApi, getNewsItemApi, postAppointmentApi, type MatterItemRes, type NewsItemRes } from "@/api/home"
    import { getWeatherApi } from "@/api/common"
    import { Close } from "@vicons/ionicons5"
    import { jointFilePath } from "@/utils"
    import Preform from "./detail/Preform.vue"
    import PreSuccessModal from "./detail/PreSuccessModal.vue"

    const userStore = useUserStore()
    const { userInfo, token } = storeToRefs(userStore)
 
    const route = useRoute()
    const router = useRouter()

    const cacheStore = useCacheStore()
    const { kytbList } = storeToRefs(cacheStore)

    // const isShowDetail = ref(false)
    const isShowZnwbDetail = ref(false)
    const isShowKytbDetail = ref(false)

    const loginModalRef = ref()

    const isShowPreFormDrawer = ref(false)

    const weatherInfo = ref<any>(null)
    onMounted(() => {
        renderMatterData()

        renderMatterSortData()

        renderNewsData()

        getWeatherApi({location: "101080501"}).then(res => {
            weatherInfo.value = res
        })

        if(route.query.pageType) {
            if(route.query.pageType == 'kqb') {
                openDetail('kytb')
            }else if(route.query.pageType == 'zxb') {
                openDetail('')
            }
        }
    })

    const matterData = ref<MatterItemRes[] | []>([])
    const matterAllData = ref<MatterItemRes[] | []>([])
    async function renderMatterData() {
        const { items } = await getMatterItemApi({page: 1, page_size: 10, online: 2})
        if(items.length) {
            matterAllData.value = items
            matterData.value = items.slice(0, 6)
        }
    }

    const sortData = ref<any>([])
    const tabName = ref<'theme' | 'dept'>('theme')
    const serverType = ref<1 | 2>(2)
    async function renderMatterSortData() {
        const { items } = await getMatterSortApi({by: unref(tabName), category: unref(serverType)})
        sortData.value = items
    }

    watch(() => tabName.value, (newVal) => {
        renderMatterSortData()
    })

    watch(() => serverType.value, (newVal) => {
        renderMatterSortData()
    })

    // 新闻轮播数据
    const newsData = ref<NewsItemRes[] | []>([])
    async function renderNewsData() {
        const { items } = await getNewsItemApi({page: '1', page_size: '999'})
        newsData.value = items
    }

    const detailId = ref('')
    const openDetail = (type:string, uuid?:string) => {
        if(uuid) {
            detailId.value = uuid
        }

        if(type == 'znwb') {
            isShowZnwbDetail.value = true
        }else if(type == 'kytb') {
            isShowKytbDetail.value = true
        }else {
            router.push('/consult?pageName=home')
        }
    }

    const preSuccessModalRef = ref()

    // 跳转新闻详情
    const toNewsDetail = async (row:NewsItemRes) => {
        const { uuid } = row
        const url = router.resolve({
            name: 'News',
            query: {uuid}
        });
        window.open(url.href)
    }

    const openUrlDetail = (url:string) => {
        if(url == 'unit') {
            if(!token.value) {
                window["$message"].error('请先登录')
                loginModalRef.value?.openModal()
                return
            }
            window.postMessage({type: "CREATE_TAB", content: '/other/select-area.html?redirect=http%3A%2F%2Fvaw.tongliao.sugonup.com%2F%23%2F'}, "*")
            return
        }else if(url == 'znkf') {
            window.postMessage({type: "OPEN_AI"}, "*")
        }else {
            window.open(url)
        }
    }

    const openPreDrawer = () => {
        if(!token.value) {
            window["$message"].error('请先登录')
            loginModalRef.value?.openModal()
            return
        }
        isShowPreFormDrawer.value = true
    }

    // 提交预约
    const preformRef = ref()
    const preInfo = ref<any>(null)
    const submitPre = () => {
        preformRef.value?.preformValidate().then(async (isValidate:boolean) => {
            if(isValidate) {
                const res = await postAppointmentApi(preformRef.value?.formParams)
                window['$message'].success('新增预约成功')
                isShowPreFormDrawer.value = false
                preInfo.value = res
                preSuccessModalRef.value?.openModal()
            }
        })
    }

    const toLogin = () => {
        loginModalRef.value?.openModal()
    }

    // 退出登录
    const loginOutModalRef = ref()
    const doLogout = () => {
        loginOutModalRef.value?.openModal()
    }
</script>

<style>
.out-login-popover {
    border-radius: 10px !important;
    padding: 12px 28px !important;
    margin-left: -26px;
    margin-top: 12px !important;
}
</style>

<style lang='scss' scoped>
.logo-tex {
    color: rgba(255,255,255,0.8);
    text-shadow: 0px 0px 9px rgba(0,0,0,0.68);
}
.content-wrap {
    // height: calc(100% - 116px);
    margin-top: 20px;
    // margin-bottom: 28px;

    .wrap-card {
        position: relative;
        padding: 26px;
        overflow: hidden;
        background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
        border: 1px solid;
        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.53), rgba(255, 255, 255, 0.08)) 1 1;

        &.znwb-bg {
            background: url('@/assets/image/bg-znwb.png') no-repeat;
            background-size: 100% 100%;
            border: 0;
            border-image: none;
        }

        .zxdb-content {
            li {
                padding: 20px 4px;
                border-bottom: 1px dashed rgba(255,255,255,0.3);
                cursor: pointer;

                &:last-child {
                    border-bottom: none;
                }

                transition: all .3s;

                &:hover {
                    background: rgba(255,255,255,0.3);
                }
            }
        }

        .kytb-li {
            transition: all .3s;
            background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.08)) 1 1;

            &:hover {
                background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .8) 0%, rgba(22, 119, 255, .8) 45%, rgba(0,85,254,0.88) 100%);
            }
        }

        .znwb-content {
            position: relative;
            height: calc(100% - 50px);
            margin-top: 20px;
            padding: 18px 11px 12px 29px;
            background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
            border: 1px solid;
            border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.08)) 1 1;

            .fw-tab-active {
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    height: 3px;
                    width: 106%;
                    background-color: #fff;
                    left: -2%;
                    bottom: -6px;
                }
            }

            ul {
                height: calc(100% - 30px);
                overflow-y: auto;
            }

            li {
                position: relative;
                padding: 26px 17px 17px 0;
                margin-left: 55px;
                border-bottom: 1px solid rgba(255,255,255,0.3);

                &.no-matter {
                    border-bottom: 0;
                }
            }

            .znwb-tabs {
                position: absolute;
                right: -1px;
                top: -34px;

                .znwb-tab-li {
                    position: relative;
                    display: flex;
                    height: 34px;
                    align-items: center;
                    font-size: 16px;
                    color: rgba(255,255,255,0.5);
                    padding: 0 23px;
                    font-weight: 600;
                    cursor: pointer;

                    background: radial-gradient( 182% 209% at 50% 13%, rgba(0, 186, 255, .5) 0%, rgba(22, 119, 255, .5) 45%, rgba(0,85,254,0.38) 100%);
                    border: 1px solid;
                    border-bottom: 0;
                    border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.43), rgba(255, 255, 255, 0.08)) 1 1;

                    &.active {
                        background: #1084f1;
                        border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.73), rgba(172, 195, 235, 1)) 1 1;
                        color: #fff;

                        &::after {
                            content: '';
                            background: #1084f1;
                            position: absolute;
                            width: 98%;
                            height: 2px;
                            bottom: -1px;
                            left: 0;
                            z-index: 999;
                        }
                    }
                }
            }

            .line-clamp-2 {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                margin-left: -34px;
                margin-top: -16px;

                span {
                    display: inline-flex;
                    margin-left: 34px;
                    white-space: nowrap;
                    color: #fff !important;
                    margin-top: 16px;
                }
            }
        }
    }

    .xx-card {
        position: relative;
        border-radius: 20px;
        background: linear-gradient( 180deg, #5364F3 0%, #574DEE 100%);
    }
}

.login-form {
    width: 80%;
    padding-right: 30px;
    margin-left: -30px;

    ::v-deep(.n-form-item-label) {
        min-height: 48px !important;
    }

    ::v-deep(.n-input__input-el) {
        height: 48px;
    }
}

.login-card {
    ::v-deep(.n-card-header) {
        padding-bottom: 16px;
    }
}
</style>